<template>
  <el-dialog
    :model-value="modelValue"
    title="审核"
    width="60%"
    :before-close="closePopup"
  >
    <div class="content" v-loading="auditData.submitting">
      <template v-if="status === 'agree'">
        <p class="item">
          审核通过后该评论状态变为“已通过”且内容将会发布，确定要通过审核吗？
        </p>
      </template>
      <template v-else>
        <p class="item">
          该作品违反社区内容规定，不予通过审核，请添加未通过原因
        </p>
        <el-input
          class="item"
          v-model="auditData.post.reason"
          :rows="10"
          type="textarea"
          placeholder="请输入拒绝原因"
        />
      </template>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <template v-if="status === 'agree'">
          <el-button type="success" @click="auditFn.submitResult"
            >通过</el-button
          >
          <el-button @click="auditFn.closePopup">取消</el-button>
        </template>
        <template v-else>
          <el-button type="danger" @click="auditFn.submitResult"
            >拒绝</el-button
          >
          <el-button @click="auditFn.closePopup">取消</el-button>
        </template>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { ref, reactive, watchEffect } from "vue";
import { auditReview } from "@/api/eventsinfo.js";
import { ElMessage } from "element-plus";

export default {
  name: "auditPopup",
  components: {},
  setup(props, content) {
    // 默认数据备份，以便重置或恢复
    const { $data: auditData, $fn: auditFn } = initData(props, content);

    return {
      auditData,
      auditFn,
      modelValue: props.modelValue,
      itemId: props.itemId,
      status: props.status,
    };
  },
  props: {
    itemId: [Number, String], //作品id
    status: {
      //操作状态，agree通过，reject拒绝
      validator: (value) => ["agree", "reject", ""].includes(value),
    },
    modelValue: Boolean,
  },
};

function initData(props, content) {
  const checkedReason = ref("");
  const $data = reactive({
    post: {
      id: "",
      reviewStatus: "",
      reason: "",
    },
    submitting: false,
  });

  watchEffect(() => {
    $data.post.id = props.itemId;
    $data.post.reviewStatus = props.status === "agree" ? "3" : "2";
  });

  const $fn = {
    closePopup() {
      $data.post = {
        id: "",
        reviewStatus: "",
        reason: "",
      };
      checkedReason.value = "";
      $data.submitting = false;
      content.emit("update:modelValue", false);
    },
    submitResult() {
      let req = {};
      if (props.status === "reject") {
        if (!$data.post.reason && !checkedReason.value) {
          ElMessage.warning("请输入或选择拒绝理由！");
          return;
        }
        req = {
          ...$data.post,
          reason: $data.post.reason || checkedReason.value,
        };
      } else {
        req = {
          ...$data.post,
          reason: "审核成功，感谢您对 品客社区的支持！",
        };
      }
      $data.submitting = true;
      auditReview(req).then((res) => {
        if (res.code === 0) {
          $data.submitting = false;
          ElMessage.success("审核成功");
          $fn.closePopup();
          content.emit("submitCompleted");
        }
      });
    },
    onChange(reason) {
      console.log("reason:", checkedReason.value, reason);
      if (checkedReason.value === reason) {
        checkedReason.value = "";
        return;
      }
      checkedReason.value = reason;
    },
  };
  return {
    $data,
    $fn,
  };
}
</script>

<style scoped lang="scss">
.content {
  margin: 24px;
  .item {
    margin: 12px 0;
  }
  .tag {
    margin-right: 12px;
    cursor: pointer;
  }
}
.dialog-footer {
  text-align: center;
}
</style>